import React, { useState } from 'react';
import { Button } from 'antd'; // 如果你使用 Ant Design
import { TabletOutlined } from '@ant-design/icons';
import './ButtonWitthTooltid.css'; // 导入 CSS 文件
import logo from './logo.png'; //导入二维码图片

const ButtonWithTooltip: React.FC = () => {
  const [showTooltip, setShowTooltip] = useState(false);

  const handleMouseEnter = () => {
    setShowTooltip(true);
  };

  const handleMouseLeave = () => {
    setShowTooltip(false);
  };

  return (
    <div 
      className="button-container" 
      onMouseEnter={handleMouseEnter} 
      onMouseLeave={handleMouseLeave}
    >
      <Button style={{ border: 'none', fontSize: '20px' }}>
        <TabletOutlined />
      </Button>
      {showTooltip && (
        <div className="tooltips">
          {/* 这是一个选项框框架 */}
          <img src={logo} alt="" style={{ width:'200px',height:'220px',marginLeft:'-5px',marginBottom:'10px' }} />
          <Button>手机/电脑端下载</Button>
        </div>
      )}
    </div>
  );
};

export default ButtonWithTooltip;